<template>
  <div class="dymamicTable">
    <!--   show-footer
      :footer-method="footerMethod" -->
    <vxe-table
      ref="xTable"
      v-loading="tableLoading"
      :data="tableData"
      border
      resizable
      show-overflow
      keep-source
      highlight-hover-row
      :checkbox-config="{ highlight: true}"
      :height="tableHeight"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :footer-cell-class-name="footerCellClassName"
      :seq-config="{startIndex: startIndex}"
    >
      <vxe-table-column type="seq" title="序号" width="60" />
      <!--模版  -->
      <template v-for="item in tableHeader">
        <!-- 有多级表头 -->
        <!-- Math.random 用于解决表格之间相互切换所产生的一系列问题 -->
        <table-column
          v-if="item.children && item.children.length>0"
          :key="item.id+''"
          :coloumn-header="item"
          show-overflow-tooltip
        />
        <!-- 一级表头 -->
        <template v-else>
          <vxe-table-column
            :key="item.id+Math.random()+''"
            :field="item.value"
            :title="item.label"
            show-overflow-tooltip
            width="baseWidthVariable"
            :min-width="baseWidthVariable"
            type="html"
          />
        </template>
      </template>
      <template #empty>
        <span style="color: red;">
          <img style="height:150px" src="@/assets/images/monthReport/noReport.png">
          <div>暂无报表数据</div>
        </span>
      </template>
    </vxe-table>
  </div>
</template>
<script>
import tableColumn from './TableColumn1.vue';
import commonVariable from '@/utils/commonVariable';
// import XEUtils from 'xe-utils';
export default {
  components: {
    tableColumn
  },
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true
    },
    // 加载
    tableLoading: {
      type: Boolean,
      default: () => {
        return false;
      }
    }

  },
  data() {
    return {
      baseWidthVariable: commonVariable.baseWidthVariable,
      tableHeight: '',
      startIndex: 0,
      isShow: false
    };
  },

  mounted() {
    this.tableHeight =
      window.innerHeight - this.$refs.xTable.$el.offsetTop - 150;
  },
  methods: {
    headerCellStyle({ column, columnIndex }) {
      if (column.property === 'do') {
        return {
          textAlign: 'center',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      } else {
        return {
          textAlign: 'center',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      }
    },
    footerCellClassName({ $rowIndex, columnIndex }) {
      return 'footer_right';
    },
    cellStyle({ row, rowIndex, column }) {
      if (column.property === 'NATIVENAME') {
        if (row.NATIVENAME === '新增' || row.NATIVENAME === '替换') {
          return {
            textAlign: 'center',
            color: 'red'
          };
        } else {
          return {
            textAlign: 'center'
          };
        }
      } else {
        return {
          textAlign: 'center'
        };
      }
    }

    // footerMethod({ columns, data }) {
    //   const footerData = [
    //     columns.map((column, columnIndex) => {
    //       if (columnIndex === 0) {
    //         return '合计';
    //       } else {
    //         if (columnIndex < 10 || column.property === 'do' || columnIndex > 14) {
    //           return '--';
    //         } else {
    //           return XEUtils.sum(data, column.property);
    //         }
    //       }
    //     })
    //   ];
    //   return footerData;
    // }
  }
};
</script>
<style scoped lang='scss'>
.spanHover:hover {
  text-decoration: underline;
  cursor: pointer;
}
.dymamicTable /deep/ .vxe-table .vxe-body--column.col--ellipsis,
.vxe-table.vxe-editable .vxe-body--column,
.vxe-table .vxe-footer--column.col--ellipsis,
.vxe-table .vxe-header--column.col--ellipsis {
  height: 25px !important;
}

.dymamicTable_canedit {
  display: grid;
  grid-template-columns: 14px auto;
}
.dymamicTable_canedit__icon {
  opacity: 0;
  margin-right: 10px;
}
.dymamicTable_canedit__icon_show {
  opacity: 1;
}
>>> * {
  .col--dirty {
    color: red;
    &::before {
      display: none;
    }
  }
}

</style>
